<%--
  Created by IntelliJ IDEA.
  User: 22711
  Date: 2021/10/6
  Time: 17:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车型查询</title>
    <link href="http://r1nxp2i0y.hn-bkt.clouddn.com/images/ico.png" rel="icon" type="image/x-ico"/>

    <!--引用百度地图API-->
    <style type="text/css">
        html,body{margin:0;padding:0;}
        .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
        .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/dist/layui/css/layui.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/car_rental/select_car.css" rel="stylesheet">

</head>
<style>
    .top-linkbox{
        line-height: 1.6;
    }

</style>
<body>
<jsp:include page="../message.jsp"/>

<!--=======================================1. 标题================================================-->
<jsp:include page="../util/top.jsp"/>

<!--========================2. 内容 ==================================-->
<div class="content">
    <div class="nav-city-box">
        <p></p>
    </div>
    <!--=======多条件动态查询=========-->
    <div class="choosecartype">
        <!--表单区域-->
        <form action="">
            <div class="term clearfix">
                <ul class="first">
                    <li>
                        <label class="key">
                            取车门店：
                        </label>
                        <div class="citystore">
                            <input class="citysel input-txt" id="J-city-get" name="PickUpCity" type="text" value="苏州">
                            <input class="mendian input-txt fl" id="borrow-store" name="storeBorrow" type="text" value="八万人体育场店"  list="borrow-store-list">
                            <datalist id="borrow-store-list"></datalist>
                            <span id="borrow-store-id" style="display: none;"></span>
                        </div>
                        <label class="ckb-scsm ">
                            <input class="checkboxin"  name="IsSendService" type="checkbox">
                            <span>送车上门</span>
                        </label>
                    </li>
                    <li>
                        <label class="key">
                            还车门店：
                        </label>
                        <div class="citystore">
                            <input class="citysel input-txt" id="J-city-put" name="PickUpCity" type="text" value="苏州">
                            <input class="mendian input-txt"  id="return-store"  name="storeReturn" type="text" value="八万人体育场店" list="return-store-list">
                            <datalist id="return-store-list"></datalist>
                            <span id="return-store-id" style="display: none;"></span>
                        </div>
                        <label class="ckb-scsm ">
                            <input class="checkboxin"  name="IsSendService" type="checkbox">
                            <span>上门取车</span>
                        </label>
                    </li>

                </ul>
                <ul class="second">
                    <li>
                        <label class="key">
                            取车时间：
                        </label>
                        <div class="get-time">
                            <input class="car-date input-txt" id="test-limit-one" name="getCarDate" type="text">
                            <input class="car-time input-txt" id="test-limit-three" name="getCarTime" type="text">
                        </div>
                    </li>
                    <li>
                        <label class="key">
                            还车时间：
                        </label>
                        <div class="get-time">
                            <input class="car-date input-txt" id="test-limit-two" name="getCarDate" type="text">
                            <input class="car-time input-txt" id="test-limit-four" name="getCarTime" type="text">
                        </div>
                    </li>
                </ul>
                <input class="submit-btn" type="button" value="查 询">
            </div>
        </form>
        <!--多条件选择区域-->
        <div class="prompt-box clearfix">
            <div class="lease-prompt">
<%--                *当前选定租期：--%>
<%--                <span>2</span>--%>
<%--                天--%>
            </div>
        </div>
        <div class="car-box-body">
            <div class="choose-typebox" id="choose-typebox">
                <div class="choose-model" id="choose-model">
                    <a href="javascript:void(0)" class="active">
                        <div style="display: none;"><p>全部</p></div></a>
                    <a href="javascript:void(0)">
                        <div class="model-classify">
                            <p>经济型</p>
                            <span class="model-pic2"></span>
                        </div>
                    </a>
                    <a href="javascript:void(0)">
                        <div class="model-classify">
                            <p>舒适型</p>
                            <span class="model-pic3"></span>
                        </div>
                    </a>
                    <a href="javascript:void(0)">
                        <div class="model-classify">
                            <p>精英型</p>
                            <span class="model-pic4"></span>
                        </div>
                    </a>
                    <a href="javascript:void(0)">
                        <div class="model-classify">
                            <p>SUV</p>
                            <span class="model-pic5"></span>
                        </div>
                    </a>
                    <a href="javascript:void(0)">
                        <div class="model-classify">
                            <p>5-15座商务</p>
                            <span class="model-pic6"></span>
                        </div>
                    </a>
                    <a href="javascript:void(0)">
                        <div class="model-classify">
                            <p>电动型</p>
                            <span class="model-pic7"></span>
                        </div>
                    </a>
                    <a href="javascript:void(0)">
                        <div class="model-classify">
                            <p>高端车</p>
                            <span class="model-pic8"></span>
                        </div>
                    </a>
                </div>
                <div class="chose-branch">
                    <div class="choose-brand choose-ck">
                        <span>品牌：</span>
                        <div class="brandlist" id="brandlist">
                            <a class="active" href="javascript:void(0)" >全部</a>
                            <a href="javascript:void(0)">雪佛兰</a>
                            <a href="javascript:void(0)">大众</a>
                            <a href="javascript:void(0)">福特</a>
                            <a href="javascript:void(0)">本田</a>
                            <a href="javascript:void(0)">丰田</a>
                            <a href="javascript:void(0)">马自达</a>
                            <a href="javascript:void(0)">吉利</a>
                            <a href="javascript:void(0)">标致</a>
                            <a href="javascript:void(0)">别克</a>
                            <a href="javascript:void(0)">铃木</a>
                            <a href="javascript:void(0)">华晨华颂</a>
                            <a href="javascript:void(0)">雪铁龙</a>
                            <a href="javascript:void(0)">现代</a>
                            <a href="javascript:void(0)">宝马</a>
                            <a href="javascript:void(0)">奇瑞</a>
                            <a href="javascript:void(0)">比亚迪</a>
                            <a href="javascript:void(0)">奥迪</a>
                            <a href="javascript:void(0)">奔驰</a>
                            <a href="javascript:void(0)">长安</a>
                            <a href="javascript:void(0)">东南</a>
                            <a href="javascript:void(0)">福田</a>
                            <a href="javascript:void(0)">汇众</a>
                            <a href="javascript:void(0)">江淮</a>
                            <a href="javascript:void(0)">江铃</a>
                            <a href="javascript:void(0)">金杯</a>
                            <a href="javascript:void(0)">金龙</a>
                            <!--过第二行后的-->
                            <a href="javascript:void(0)">五菱</a>
                            <a href="javascript:void(0)">东风日产</a>


                        </div>
                    </div>
                    <div class="choose-price choose-ck">
                        <span>价格:</span>
                        <div class="pricelist" id="pricelist">
                            <a class="active" href="javascript:void(0)">全部</a>
                            <a href="javascript:void(0)">100元以下</a>
                            <a href="javascript:void(0)">100-200元</a>
                            <a href="javascript:void(0)">200-300元</a>
                            <a href="javascript:void(0)">300元以上</a>
                        </div>
                    </div>
                    <div class="choose-gear choose-ck">
                        <span>排挡:</span>
                        <div class="grarlist" id="grarlist">
                            <a class="active" href="javascript:void(0)">全部</a>
                            <a href="javascript:void(0)">手动</a>
                            <a href="javascript:void(0)">自动</a>
                            <a href="javascript:void(0)">无级变速</a>
                            <a href="javascript:void(0)">手自一体</a>
                            <a href="javascript:void(0)">双离合</a>
                        </div>
                    </div>
                    <div class="choose-seat choose-ck">
                        <span>座位</span>
                        <div class="seatlist" id="seatlist">
                            <a class="active" href="javascript:void(0)">全部</a>
                            <a href="javascript:void(0)">2座</a>
                            <a href="javascript:void(0)">4座</a>
                            <a href="javascript:void(0)">5座</a>
                            <a href="javascript:void(0)">7座</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sort" id="sort">
                <ul class="field-orderby" id="field-orderby">
                    <li>
                        <a href="javascript:void(0)" class="field-orderby-active">默认排序</a>
                    </li>
                    <li>
                        <a class="order-by-price" href="javascript:void(0)">按租金降序</a>
                    </li>
                    <li>
                    <a class="order-by-price" href="javascript:void(0)">按租金升序</a>
                    </li>

                    <li>
                        <a href="javascript:void(0)">按排量降序</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">按排量升序</a>
                    </li>
                </ul>
                <div class="bottom-right">
                    *共有<span>0</span>种车型可以租用
                </div>
            </div>
        </div>
    </div>
    <!--======内容右边===========-->
    <div class="step1-body-right">
        <!--百度地图容器-->
        <div style="width:270px;height:270px;border:#ccc solid 1px;" id="dituContent"></div>
        <ul id="right-store">
            <li>取车门店：</li>
            <li>
                <h4>寒山寺店</h4>
            </li>
            <li>
                <span>江苏省苏州市姑苏区和园路197号102室</span>
            </li>
            <li>
                <strong>门店电话：<span>15736978888</span></strong>
            </li>
            <li>
                <strong>营业时间：<span>8:00-18:00</span></strong>
            </li>
        </ul>
    </div>
    <div class="det-carlist" >
        <ul>
<%--            <li class="licar-picbox">--%>
<%--                <div class="licar-picinfo">--%>
<%--                    <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/car-01-images.png">--%>
<%--                </div>--%>
<%--                <div class="licar-namebox">--%>
<%--                    <p class="car-nameinfo"><span>丰田雪凌</span></p>--%>
<%--                    <p class="car-introinfo">--%>
<%--                            <span>--%>
<%--                                自动--%>
<%--                            </span>--%>
<%--                        <span>|</span>--%>
<%--                        <span>1.2</span>--%>
<%--                        <span>T</span>--%>
<%--                        <a href="javascript:void(0)" class="show-car-detail">车辆详情</a>--%>
<%--                    </p>--%>
<%--                </div>--%>
<%--                <div class="licar-info">--%>
<%--                    <p class="condition1">--%>
<%--                            <span class="carprice">--%>
<%--                                <i class="symbol">￥</i>--%>
<%--                                <em class="total-price">293</em>/日均--%>
<%--                            </span>--%>
<%--                        <span class="licar-btn">--%>
<%--                                <a href="">预订</a>--%>
<%--                            </span>--%>
<%--                    </p>--%>
<%--                </div>--%>
<%--            </li>--%>
        </ul>
    </div>
    <div class="car-page" id="demo1"></div>

    <!--============================汽车详情框=============================-->
    <div class="show-car-hide"></div>
   <%-- <!--        <div class="myshowbox">-->
    <!--        其实一开始给它来个空的myshowbox然后给它填充内容-->
    <!--            <div class="myshowbox-container">-->
    <!--                <a href="javascript:void(0)" class="btn-close"><span></span></a>-->
    <!--                <div class="div-myshowbox" style="width: 940px; height: 600px;">-->
    <!--                    <div class="common-modalBox">-->
    <!--                        <div class="current-carname">-->
    <!--                            <h3>大众朗逸</h3>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                    <div class="current-carbox">-->
    <!--                        <div class="current-carlist">-->
    <!--                            <div class="current-carinfo">-->

    <!--                                <div class="current-carpic">-->
    <!--                                    <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/red-car1.png" alt="">-->
    <!--                                    <span class="video-playbtn video-li" data-cartypeids="421" id="carInfoVideo"></span>-->
    <!--                                </div>-->
    <!--                                <p>大众朗逸</p>-->
    <!--                            </div>-->
    <!--                            <ul class="current-carconfigure clear_float">-->
    <!--                                <li id="li-first-child">-->
    <!--                                    <p class="configure-name"><span class="configure-icon">-->
    <!--                                    <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/car-shift.png" alt=""></span></p>-->
    <!--                                    <p>变速箱:<span>自动</span></p>-->
    <!--                                </li>-->
    <!--                                <li>-->
    <!--                                    <p class="configure-name"><span class="configure-icon"><img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/car-tank-capacity.png" alt=""></span></p>-->
    <!--                                    <p>油箱容量:<span>55</span></p>-->
    <!--                                </li>-->
    <!--                                <li>-->
    <!--                                    <p class="configure-name"><span class="configure-icon"><img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/car-displacement.png" alt=""></span></p>-->
    <!--                                    <p>排量:<span>1.6</span>L</p>-->
    <!--                                </li>-->
    <!--                                <li>-->
    <!--                                    <p class="configure-name"><span class="configure-icon"><img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/car-seat-number.png" alt=""></span></p>-->
    <!--                                    <p>座位数:<span>5</span></p>-->
    <!--                                </li>-->
    <!--                                <li>-->
    <!--                                    <p class="configure-name"><span class="configure-icon"><img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/car-air-inlet-mode.png" alt=""></span></p>-->
    <!--                                    <p>进气:<span>自然吸气</span></p>-->
    <!--                                </li>-->
    <!--                            </ul>-->
    <!--                        </div>-->

    <!--                    </div>-->
    <!--                    <div class="current-carintro">-->
    <!--                        <h3>车辆颜色说明</h3>-->
    <!--                        <p>车辆颜色请以门店为准，图片仅为车型示意图。</p>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->--%>

</div>

<!--底部-->
<div class="footer">
    <div class="footer-box clear_float">
        <div class="footer-left">
            <p>
                <a href="" >关于小橘</a>
                |
                <a href="" >移动客户端</a>
                |
                <a href="" >帮助中心</a>
                |
                <a href="" >建议专区</a>
                |
                <a href="" >联系我们</a>
                |
                <a href="" >友情链接</a>
                | &nbsp;投诉通道：400-821-1608 &nbsp;
            </p>
            <p>
                Copyright © 2007 - 2021 上海小橘信息技术服务有限公司
                <a href="" >ICP证：沪B2-20140130</a>
            </p>
        </div>
        <div class="footer-right">
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_first.png">
            </a>
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_second.png">
            </a>
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_third.png">
            </a>
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_forth.png">
            </a>
        </div>
    </div>
</div>

<script>

    $("#test-limit-one").blur(function(){
    });
    $("#test-limit-two").blur(function (){
        // console.log("hello");
    })

    /*====================ajax car数据渲染================*/
    // 初始化多条件查询
    /*showCarList("全部", "全部",
        "全部",
        "全部", "全部",
        "默认排序",1);*/

    var globalCarType;
    var globalCarBrand;
    var globalCarDailyPrice;
    var globalCarShiftType;
    var globalCarSeatNumber;
    var globalOrderBy;
    var globalPageNum;
    // 分页根据多条件进行分页查询
    function showCarList(carType, carBrand,
                         carDailyPrice,
                         carShiftType, carSeatNumber,
                         orderBy,pageNum){
        globalCarType = carType;
        globalCarBrand = carBrand;
        globalCarDailyPrice = carDailyPrice;
        globalCarShiftType = carShiftType;
        globalCarSeatNumber = carSeatNumber;
        globalOrderBy = orderBy;
        globalPageNum = pageNum;

        var minCarDailyPrice;
        var maxCarDailyPrice;
        if(carType == "全部")
            carType = "-1";
        if(carBrand == "全部")
            carBrand = "-1"
        if(carDailyPrice == "全部") {
            minCarDailyPrice = -1;
            maxCarDailyPrice = -1;
        }
        else if(carDailyPrice == "100元以下") {
            minCarDailyPrice = -1;
            maxCarDailyPrice = 100;
        }
        else if(carDailyPrice == "100-200元"){
            minCarDailyPrice = 100;
            maxCarDailyPrice = 200;
        }else if(carDailyPrice = "200-300元"){
            minCarDailyPrice = 200;
            maxCarDailyPrice = 300;
        }else if(carDailyPrice = "300元以上"){
            minCarDailyPrice = 300;
            maxCarDailyPrice = -1;
        }
        if(carShiftType == "全部")
            carShiftType = "-1";
        if(carSeatNumber == "全部")
            carSeatNumber = -1
        else if(carSeatNumber == "2座")
            carSeatNumber = 2;
        else if(carSeatNumber == "4座")
            carSeatNumber = 4;
        else if(carSeatNumber == "5座")
            carSeatNumber = 5;
        else if(carSeatNumber == "7座")
            carSeatNumber = 7;
        if(orderBy == "默认排序")
            orderBy = "-1"
        else if(orderBy == "按租金降序")
            orderBy = "car_daily_price desc"
        else if(orderBy == "按租金升序")
            orderBy = "car_daily_price asc"
        if(orderBy == "按排量降序")
            orderBy = "car_displacement desc"
        else if(orderBy == "按排量升序")
            orderBy = "car_displacement asc"
        if(typeof(pageNum) != "number")
            pageNum = 1;
        var url = '${pageContext.request.contextPath}/car/' + carType + '/'
            + carBrand + '/' + minCarDailyPrice + '/' + maxCarDailyPrice + '/' + carShiftType + '/' + carSeatNumber + '/' + orderBy + '/' + pageNum + '';
        $.get(url,null,
        function (result){
            $(".det-carlist ul").html("");
            // console.log(JSON.stringify(result));

            if(result.code == 200){
            var carArray = result.data.list;
            for(var i = 0;i<carArray.length;i++){
            var carId = carArray[i].carId;
            var carName = carArray[i].carName;
            var carDailyPrice = carArray[i].carDailyPrice;
            var carImagePath = carArray[i].carImagePath;
            var carShiftType = carArray[i].carShiftType;
            var carDisplacement = carArray[i].carDisplacement;
            console.log("hello")
            if(carDisplacement == 2 || carDisplacement == 3) {
                carDisplacement += ".0";
            }
            var carAirInletMode = carArray[i].carAirInletMode;
            var custId = "${loginCustomer.custId}";
            if(carAirInletMode == "自然进气")
                carAirInletMode = "L";
            else
                carAirInletMode = "T";
            var liEle = '<li class="licar-picbox">\n' +
                '                <div class="licar-picinfo">\n' +
                '                    <img src="' + carImagePath + '">\n' +
                '                </div>\n' +
                '                <div class="licar-namebox">\n' +
                '                    <p class="car-nameinfo"><span>' + carName + '</span></p>\n' +
                '                    <p class="car-introinfo">\n' +
                '                            <span>\n' +
                '                                ' + carShiftType + '\n' +
                '                            </span>\n' +
                '                        <span>|</span>\n' +
                '                        <span>' + carDisplacement + '</span>\n' +
                '                        <span>' + carAirInletMode + '</span>\n' +
                '                        <a href="${pageContext.request.contextPath}/car/detail/' + carId + '" class="show-car-detail">车辆详情</a>\n' +
                '                    </p>\n' +
                '                </div>\n' +
                '                <div class="licar-info">\n' +
                '                    <p class="condition1">\n' +
                '                            <span class="carprice">\n' +
                '                                <i class="symbol">￥</i>\n' +
                '                                <em class="total-price">' + carDailyPrice + '</em>/日均\n' +
                '                            </span>\n' +
                '                        <span class="licar-btn">\n  <i style="display: none">' + carId + '</i>' +
                '                                <a style="width: 83px;height: 30px;display:inline-block;" href="javascript:void(0)">预订</a>\n' +
                '                            </span>\n' +
                '                    </p>\n' +
                '                </div>\n' +
                '            </li>';
                $(".det-carlist ul").append(liEle);
            }



            // var pageNum = result.data.pageNum;
            var pages = result.data.pages;
            var prePage = result.data.prePage;
            var nextPage = result.data.nextPage;
            var hasPreviousPage = result.data.hasPreviousPage;
            var hasNextPage = result.data.hasNextPage;
            var total = result.data.total;
            var pageEle = "";
            $(".bottom-right span").text(total);
            // '<li class="licar-picbox">\n' +
            // '                            共有<span>56</span>条评价\n' +
            // '                            第<span>1</span>页\n' +
            // '                            <a href="">上一页</a>\n' +
            // '                            <a href="">下一页</a>\n' +
            // '                            共有<span>5</span>页\n' +
            // '                        </li>'
            //     var a = "第<span>1</span>页\n" +
            //         "                            <a href=\"javascript:showCarList(globalCarType,globalCarBrand,\n" +
            //         "\t\t\t\t\t\t\'"+tglobalCarDailyPrice+"','"+globalCarShiftType+"','"+globalCarSeatNumber+"' ,\n" +
            //         "\t\t\t\t\t\t\'"+tglobalOrderBy+"',"+prePage+")\">上一页</a>\n" +
            //         "                            <a href=\"\">下一页</a>\n" +
            //         "                            共有<span>5</span>页"

            pageEle +=  "                          共有<span>" + total + "</span>条数据\n";

            pageEle += "                            当前第<span>" + pageNum + "</span>页\n";
            if(hasPreviousPage) {
                pageEle += "                            <a href=\"javascript:showCarList('"+globalCarType+"','"+globalCarBrand+"',\n" +
                    "\t\t\t\t\t\t\t'"+globalCarDailyPrice+"','"+globalCarShiftType+"','"+globalCarSeatNumber+"' ,\n" +
                    "\t\t\t\t\t\t\t'"+globalOrderBy+"',"+prePage+")\">上一页</a>\n";
            }

            if(hasNextPage) {
                pageEle += "                            <a href=\"javascript:showCarList('"+globalCarType+"','"+globalCarBrand+"',\n" +
                    "\t\t\t\t\t\t\t'"+globalCarDailyPrice+"','"+globalCarShiftType+"','"+globalCarSeatNumber+"' ,\n" +
                    "\t\t\t\t\t\t\t'"+globalOrderBy+"',"+nextPage+")\">下一页</a>\n";
            }
            pageEle += '                            共有<span>' + pages + '</span>页\n' ;
            $(".car-page").html("");
            $(".car-page").append(pageEle);
            }else{
                var noCar = '<div id="nocar" style="display: block;">\n' +
                    '            <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/nocar.png" alt="">\n' +
                    '            <div class="nocar-explain">\n' +
                    '                <p class="nocar-text1">对不起，当前门店该时间段内车辆已经租满。</p>\n' +
                    '                <p class="nocar-text2">您可以重新选择其他门店。</p>\n' +
                    '            </div>\n' +
                    '        </div>';
                $(".det-carlist ul").append(noCar);
                $(".bottom-right span").text(0);
            }
        });
    }
// 初始化
    function showCarListByContainAndStore(storeId,
                                          getCarTime,
                                          carType,
                                          carBrand,
                                          carDailyPrice,
                                          carShiftType,
                                          carSeatNumber,
                                          orderBy,
                                          pageNum
                         ){
        globalCarType = carType;
        globalCarBrand = carBrand;
        globalCarDailyPrice = carDailyPrice;
        globalCarShiftType = carShiftType;
        globalCarSeatNumber = carSeatNumber;
        globalOrderBy = orderBy;
        globalPageNum = pageNum;
        var minCarDailyPrice;
        var maxCarDailyPrice;
        if(carType == "全部")
            carType = "-1";
        if(carBrand == "全部")
            carBrand = "-1"
        if(carDailyPrice == "全部") {
            minCarDailyPrice = -1;
            maxCarDailyPrice = -1;
        }
        else if(carDailyPrice == "100元以下") {
            minCarDailyPrice = -1;
            maxCarDailyPrice = 100;
        }
        else if(carDailyPrice == "100-200元"){
            minCarDailyPrice = 100;
            maxCarDailyPrice = 200;
        }else if(carDailyPrice = "200-300元"){
            minCarDailyPrice = 200;
            maxCarDailyPrice = 300;
        }else if(carDailyPrice = "300元以上"){
            minCarDailyPrice = 300;
            maxCarDailyPrice = -1;
        }
        if(carShiftType == "全部")
            carShiftType = "-1";
        if(carSeatNumber == "全部")
            carSeatNumber = -1
        else if(carSeatNumber == "2座")
            carSeatNumber = 2;
        else if(carSeatNumber == "4座")
            carSeatNumber = 4;
        else if(carSeatNumber == "5座")
            carSeatNumber = 5;
        else if(carSeatNumber == "7座")
            carSeatNumber = 7;

        if(orderBy == "默认排序")
            orderBy = "-1"
        else if(orderBy == "按租金降序")
            orderBy = "car_daily_price desc"
        else if(orderBy == "按租金升序")
            orderBy = "car_daily_price asc"
        else if(orderBy == "按排量降序")
            orderBy = "car_displacement desc"
        else if(orderBy == "按排量升序")
            orderBy = "car_displacement asc"
        if(typeof(pageNum) != "number")
            pageNum = 1;

        if(typeof(pageNum) != "number")
            pageNum = 1;
            var url = "${pageContext.request.contextPath}/car/ContainAndDate";
           $.get(url,
               {
               storeId:storeId,
               getCarTime:getCarTime,
               carType:carType,
               carBrand:carBrand,
               minCarDailyPrice:minCarDailyPrice,
               maxCarDailyPrice:maxCarDailyPrice,
               carShiftType:carShiftType,
               carSeatNumber:carSeatNumber,
               orderBy:orderBy,
               pageNum:pageNum
               },
            function (result){
                $(".det-carlist ul").html("");
                $(".car-page").html("");
                if(result.code == 200){

                    if(result.code == 200){
                        var carArray = result.data.list;
                        for(var i = 0;i<carArray.length;i++){
                            var carId = carArray[i].carId;
                            var carName = carArray[i].carName;
                            var carDailyPrice = carArray[i].carDailyPrice;
                            var carImagePath = carArray[i].carImagePath;
                            var carShiftType = carArray[i].carShiftType;
                            var carDisplacement = carArray[i].carDisplacement;
                            var carAirInletMode = carArray[i].carAirInletMode;
                            if(carDisplacement == 1 || carDisplacement == 2 || carDisplacement == 3) {
                                carDisplacement += ".0";
                                console.log("heloejfowj")
                            }
                            var custId = "${loginCustomer.custId}";
                            if(carAirInletMode == "自然进气")
                                carAirInletMode = "L";
                            else
                                carAirInletMode = "T";
                            var liEle = '<li class="licar-picbox">\n' +
                                '                <div class="licar-picinfo">\n' +
                                '                    <img src="' + carImagePath + '">\n' +
                                '                </div>\n' +
                                '                <div class="licar-namebox">\n' +
                                '                    <p class="car-nameinfo"><span>' + carName + '</span></p>\n' +
                                '                    <p class="car-introinfo">\n' +
                                '                            <span>\n' +
                                '                                ' + carShiftType + '\n' +
                                '                            </span>\n' +
                                '                        <span>|</span>\n' +
                                '                        <span>' + carDisplacement + '</span>\n' +
                                '                        <span>' + carAirInletMode + '</span>\n' +
                                '                        <a href="${pageContext.request.contextPath}/car/detail/' + carId + '" class="show-car-detail">车辆详情</a>\n' +
                                '                    </p>\n' +
                                '                </div>\n' +
                                '                <div class="licar-info">\n' +
                                '                    <p class="condition1">\n' +
                                '                            <span class="carprice">\n' +
                                '                                <i class="symbol">￥</i>\n' +
                                '                                <em class="total-price">' + carDailyPrice + '</em>/日均\n' +
                                '                            </span>\n' +
                                '                        <span class="licar-btn">\n  <i style="display: none">' + carId + '</i>' +
                                '                                <a style="width: 83px;height: 30px;display:inline-block;" href="javascript:void(0)">预订</a>\n' +
                                '                            </span>\n' +
                                '                    </p>\n' +
                                '                </div>\n' +
                                '            </li>';
                            $(".det-carlist ul").append(liEle);
                        }
                    }

                    // var pageNum = result.data.pageNum;
                    var pages = result.data.pages;
                    var prePage = result.data.prePage;
                    var nextPage = result.data.nextPage;
                    var hasPreviousPage = result.data.hasPreviousPage;
                    var hasNextPage = result.data.hasNextPage;
                    var total = result.data.total;
                    var pageEle = "";
                    $(".bottom-right span").text(total);
                    // '<li class="licar-picbox">\n' +
                    // '                            共有<span>56</span>条评价\n' +
                    // '                            第<span>1</span>页\n' +
                    // '                            <a href="">上一页</a>\n' +
                    // '                            <a href="">下一页</a>\n' +
                    // '                            共有<span>5</span>页\n' +
                    // '                        </li>'
                    //     var a = "第<span>1</span>页\n" +
                    //         "                            <a href=\"javascript:showCarList(globalCarType,globalCarBrand,\n" +
                    //         "\t\t\t\t\t\t\'"+tglobalCarDailyPrice+"','"+globalCarShiftType+"','"+globalCarSeatNumber+"' ,\n" +
                    //         "\t\t\t\t\t\t\'"+tglobalOrderBy+"',"+prePage+")\">上一页</a>\n" +
                    //         "                            <a href=\"\">下一页</a>\n" +
                    //         "                            共有<span>5</span>页"

                    pageEle +=  "                          共有<span>" + total + "</span>条数据\n";

                    pageEle += "                            当前第<span>" + pageNum + "</span>页\n";
                    if(hasPreviousPage) {
                        pageEle += "                            <a href=\"javascript:showCarListByContainAndStore('"+storeId+"', '" + getCarTime + "','"+globalCarType+"','"+globalCarBrand+"',\n" +
                            "\t\t\t\t\t\t\t'"+globalCarDailyPrice+"','"+globalCarShiftType+"','"+globalCarSeatNumber+"' ,\n" +
                            "\t\t\t\t\t\t\t'"+globalOrderBy+"',"+prePage+")\">上一页</a>\n";
                    }

                    if(hasNextPage) {
                        pageEle += "                            <a href=\"javascript:showCarListByContainAndStore('"+storeId+"', '" + getCarTime + "','"+globalCarType+"','"+globalCarBrand+"',\n" +
                            "\t\t\t\t\t\t\t'"+globalCarDailyPrice+"','"+globalCarShiftType+"','"+globalCarSeatNumber+"' ,\n" +
                            "\t\t\t\t\t\t\t'"+globalOrderBy+"',"+nextPage+")\">下一页</a>\n";
                    }
                    pageEle += '                            共有<span>' + pages + '</span>页\n' ;

                    $(".car-page").append(pageEle);
                }else{
                    var noCar = '<div id="nocar" style="display: block;">\n' +
                        '            <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/nocar.png" alt="">\n' +
                        '            <div class="nocar-explain">\n' +
                        '                <p class="nocar-text1">对不起，当前门店该时间段内车辆已经租满。</p>\n' +
                        '                <p class="nocar-text2">您可以重新选择其他门店。</p>\n' +
                        '            </div>\n' +
                        '        </div>';
                    $(".det-carlist ul").append(noCar);
                    $(".bottom-right span").text(0);
                }
            });
    }

    // 根据店铺和租借时间以及多条件查询

    // 初始化显示全部门店
    $("#borrow-store").click(function (){
        $("#borrow-store").val("");
    })
    $("#return-store").click(function (){
        $("#return-store").val("");
    })
    var storeArr;
    initializationStore();
    function initializationStore() {
        $("#borrow-store").val("");
        var borrowStoreList = $("#borrow-store-list").html();
        if(borrowStoreList == ""){
            var storeCity = $("#J-city-get").val();
            var url = "${pageContext.request.contextPath}/store/" + storeCity;
            $.get(url,null,
                function (result){
                    storeArr = result.data;
                    for(var i = 0;i<storeArr.length;i++) {
                        var optionEle = '<option>' + storeArr[i].storeName+'</option>\n';
                        $("#borrow-store-list").append(optionEle);
                        $("#return-store-list").append(optionEle);
                    }

                    $("#borrow-store").val(storeArr[0].storeName);
                    $("#return-store").val(storeArr[0].storeName);
                    $("#borrow-store-id").text(storeArr[0].storeId);
                    $("#return-store-id").text(storeArr[0].storeId);

                    var getCarDate = $("#test-limit-one").val();
                    var getCarTime = $("#test-limit-three").val();

                    getCarTime = getCarDate+" " + getCarTime;
                    getCarTime = new Date(getCarTime);

                    showCarListByContainAndStore(
                        storeArr[0].storeId,
                        getCarTime,
                        "全部",
                        "全部",
                        "全部",
                        "全部",
                        "全部",
                        "默认排序",
                        1
                    )


                });
        }
    }
    $("#borrow-store").blur(function (){
        setSpanBorrowStoreId(storeArr);
    });
    $("#return-store").blur(function (){
        setSpanReturnStoreId(storeArr)
    });
    function setSpanBorrowStoreId(storeArr){
        var borrowStoreName = $("#borrow-store").val();

        if(borrowStoreName != ""){
            for(var j = 0; j <storeArr.length;j++){
                var storeName = storeArr[j].storeName;
                var storeId = storeArr[j].storeId;
                if(borrowStoreName == storeName) {
                    $("#borrow-store-id").text(storeId);
                    var getStoreUrl = "${pageContext.request.contextPath}/get_store/by_id";
                    $.get(getStoreUrl,{
                        storeId:storeId
                    },function (result){
                        $("#right-store").html("");
                        console.log(JSON.stringify(result));
                        var storeName = result.data.storeName;
                        var storeTel = result.data.storeTel;
                        var storeBusinessTime = result.data.storeBusinessTime;
                        var storeProvince =  result.data.storeProvince;
                        var storeCity = result.data.storeCity;
                        var storeArea = result.data.storeArea;
                        var storeDetailAddress = result.data.storeDetailAddress;
                        storeDetailAddress = storeProvince + "省" + storeCity + "市" + storeArea + storeDetailAddress;
                        var liEle = '   <li>取车门店：</li>\n' +
                            '            <li>\n' +
                            '                <h4>' + storeName + '</h4>\n' +
                            '            </li>\n' +
                            '            <li>\n' +
                            '                <span>' + storeDetailAddress + '</span>\n' +
                            '            </li>\n' +
                            '            <li>\n' +
                            '                <strong>门店电话：<span>' + storeTel + '</span></strong>\n' +
                            '            </li>\n' +
                            '            <li>\n' +
                            '                <strong>营业时间：<span>' + storeBusinessTime + '</span></strong>\n' +
                            '            </li>';
                        $("#right-store").append(liEle);
                    })
                    break;
                }else if(j == storeArr.length - 1){
                    alert("门店名输入有误~重新选择下吧~")
                    $("#borrow-store").val(storeArr[0].storeName)
                }
                // else if()
            }
        }else{
            alert("请选择门店~");
            $("#borrow-store").val(storeArr[0].storeName)
        }
    }
    function setSpanReturnStoreId(storeArr){
        // console.log("hello");
        var returnStoreName = $("#return-store").val();
        // console.log("returnStoreName != 空："+ (returnStoreName != ""));
        // console.log("returnStoreName" + returnStoreName);

        if(returnStoreName != ""){
            for(var j = 0; j <storeArr.length;j++){
                var storeName = storeArr[j].storeName;
                var storeId = storeArr[j].storeId;
                if(returnStoreName == storeName) {
                    $("#return-store-id").text(storeId);
                    break;
                }else if(j == storeArr.length - 1){
                    alert("门店名输入有误~重新选择下吧~")
                    $("#return-store").val(storeArr[0].storeName)
                }
                // else if()
            }
        }else{
            alert("请选择门店~");
            $("#return-store").val(storeArr[0].storeName)
        }
    }
   $(".det-carlist").click(function (event){
        var eventText = event.target.innerText;
        var custId = "${loginCustomer.custId}";
        if(eventText == "预订"){
            if(custId != ""){
            var carId = event.target.parentElement.children[0].innerText;
            var borrowStoreId = $("#borrow-store-id").text();
            var returnStoreId = $("#return-store-id").text();

            var getCarDate = $("#test-limit-one").val();
            var getCarTime = $("#test-limit-three").val();
            var returnCarDate = $("#test-limit-two").val();
            var returnCarTime = $("#test-limit-four").val();
            // console.log("borrowStoreName: " + borrowStoreId);
            // console.log("returnStore: " + returnStoreId);
            // console.log("carId: " + carId);
            // console.log("custId: " + custId);
                getCarTime = getCarDate+" " + getCarTime;
            // console.log("getCarTime:"+getCarTime);

            returnCarTime = returnCarDate + " " +returnCarTime;
                var returnCarTime2 = new Date(returnCarTime);

                returnCarTime2 = returnCarTime2.setHours(returnCarTime2.getHours()-9);

            // console.log("returnCarTime: " + returnCarTime);
            // console.log("getCarTime:" + new Date(getCarTime));
            if(new Date(getCarTime) <= new Date()){
                alert("取车时间不能小于当前时间~");
            }else if(new Date(getCarTime) >= returnCarTime2){
                alert("取车时间与还车时间间隔不能小于九个小时~");
            }else{
                var storeCarUrl = "${pageContext.request.contextPath}/get/store_and_car";
                $.get(storeCarUrl,{
                    storeId:borrowStoreId,
                    carId:carId
                },
                function(result){
                    console.log(JSON.stringify(result));
                    if(result.data.carReserve > 0){
                        var url = '${pageContext.request.contextPath}/myOrder_second?custId=' + custId + '&carId=' + carId +'&borrowStoreId=' + borrowStoreId + '&returnStoreId=' + returnStoreId + '&getCarTime=' + getCarTime + '&returnCarTime='+returnCarTime+'';
                        window.location.href = url;
                    }else{
                        console.log("点击订单详情可以查看租借表哦！")
                        alert("抱歉亲，这辆车有人比你先一步租借走啦！")

                    }
                },"json")

            }

            }else {
                window.location.href="${pageContext.request.contextPath}/customer/login";
            }
        }
    });
    window.onscroll = function(){
        if(window.pageYOffset >= 150){
            document.querySelector(".step1-body-right").classList.add("step1-right-float");
        }else{
            document.querySelector(".step1-body-right").classList.remove("step1-right-float");
        }
    }
</script>

<script src="${pageContext.request.contextPath}/dist/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/car_rental/select_car.js"></script>


</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }

    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(121.435445,31.198777);//定义一个中心点坐标
        map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }


    initMap();//创建和初始化地图
</script>
</html>